<template>
	<view>
		<view class="time" v-if="show && success">
			<block v-if="time > 0">{{time}}秒后跳过</block>
			<view v-if="time == 0" class="close" @tap="close">跳过</view>
		</view>
		<ad-custom v-if="show && ad" :unit-id="ad.mbad" @load="adLoad()" @error="adError()"
			:class="success?'yuansheng_ad':''">
		</ad-custom>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex';
	export default {
		computed: {
			...mapGetters({
				ad:'common/ad',
				system:'common/system',
			})
		},
		name: 'adcustom',
		data() {
			return {
				show: false,
				success: false,
				time: null
			};
		},
		mounted() {
			if (this.ad && this.ad.mbad && this.ad.mbad_time > 0 && this.system.all_ad && this.system.all_ad == 1) {
				let now = Date.parse(new Date());
				if(getApp().globalData.adcustom==0 || getApp().globalData.adcustom < now){
					this.show = true;
					this.time = parseInt(this.ad.mbad_time);
					let add = parseInt(this.ad.mbad_minute) * 60 * 1000
					getApp().globalData.adcustom = now + add;
				}
			}
		},
		methods: {
			adLoad() {
				if (!this.system.all_ad && this.system.all_ad != 1){
					return true
				}
				this.success = true
				let timeout = setTimeout(res => {
					this.time--;
					if (this.time == 0) {
						if(this.ad.mbad_type==1){
							this.show = false;
						}
						clearTimeout(timeout)
					}else{
						this.adLoad()
					}
				}, 1000);
			},
			adError(err) {
				console.log('原生模板广告加载失败', err)
				this.success = false
				this.show = false
			},
			close(){
				this.success = false
				this.show = false
			}
		}
	};
</script>

<style>
	.yuansheng_ad {
		height: 100vh;
		width: 100% !important;
		position: fixed;
		z-index: 99999999;
		top: 0;
		left: 0;
		right: 0;
		margin: 0 auto;
	}

	.time {
		width: 90px;
		height: 30px;
		line-height: 30px;
		text-align: center;
		border-radius: 50px;
		margin: 0 auto;
		background-color: rgba(0, 0, 0, .6);
		position: fixed;
		z-index: 99999999999;
		left: 0;
		right: 0;
		top: 25px;
		color: #fff;
		font-size: 12px;
	}

	.close {
		color: #fff;
		text-align: center;
		border-radius: 100%;
		margin: 0 auto;
		height: 30px;
		line-height: 30px;
		color: #fff;
	}
</style>
